<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form | Page</title>
 <style type="text/css">
   body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
   }

   .hero {
     width: 100%;
     height: 100%;
     background-image: url(../images/banner.jpg);
     background-position: center;
     background-size: cover;
     position: absolute;
     display: flex;
   }

   .form-content {
     transition: 0.5s;
   }

   .form-box {
     width: 380px;
     height: 480px;
     background-color: #fff;
     margin: auto;
     padding: 5px;
     overflow: hidden;
   }

   .toggle-box {
     width: 60%;
     border-radius: 30px;
     box-shadow: 0 0 20px 9px #ff61241f;
     margin: 35px auto;
     display: flex;
     justify-content: space-evenly;
     position: relative;
   }

   .toggle-btn {
     background: transparent;
     border: 0;
     outline: none;
     padding: 10px 30px;
     position: relative;
     cursor: pointer;
   }

   .btn {
     top: 0;
     left: 0;
     position: absolute;
     width: 110px;
     height: 100%;
     background: linear-gradient(to right, #ff105f, #ffad06);
     border-radius: 30px;
     transition: .5s;
   }

   .social-icons {
     display: flex;
     justify-content: center;
   }

   .icons {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     margin: 0 12px;
     cursor: pointer;
   }

   .input-box {
     display: block;
     width: 80%;
     margin: 30px auto;
     padding: 8px 0;
     border: none;
     border-bottom: 1px solid gray;
     outline: none;
     position: relative;
   }

   .login-btn {
     margin: 30px auto;
     display: block;
     width: 50%;
     padding: 5px;
     border-radius: 30px;
     background: linear-gradient(to right, #ff105f, #ffad06);
     outline: none;
     border: none;
     padding: 10px 30px;
     cursor: pointer;
   }

   .input-checkbox {
     margin-left: 39px;
   }

   .input-span {
     margin-left: 5px;
     position: relative;
     top: -1.37px;
     font-size: 13px;
   }

   #login {
     position: relative;
   }

   #register {
     position: relative;
     left: 450px;
     bottom: 239px;
   }
 </style>
</head>
<body>
<div class="hero">
  <div class="form-box">
    <div class="toggle-box">
      <div id="btn" class="btn"></div>
      <button class="toggle-btn" onclick="login()">Log In</button>
      <button class="toggle-btn" onclick="register()">Register</button>
    </div>
    <div class="social-icons">
      <img src="./images/fb.png" alt="fb" class="icons">
      <img src="./images/gp.png" alt="gp" class="icons">
      <img src="./images/tw.png" alt="tw" class="icons">
    </div>
    <form id="login" class="form-content">
      <input class="input-box" type="text" placeholder="User Name">
      <input class="input-box" type="password" placeholder="Enter Password">
      <input class="input-checkbox" type="checkbox"><span class="input-span">Remember Password</span>
      <button class="login-btn">Log In</button>
    </form>
    <form id="register" class="form-content">
      <input class="input-box" type="text" placeholder="User Name">
      <input class="input-box" type="email" placeholder="Email Id">
      <input class="input-box" type="password" placeholder="Enter Password">
      <input class="input-checkbox" type="checkbox"><span class="input-span">I agree with terms & conditions</span>
      <button class="login-btn">Register</button>
    </form>
  </div>
</div>
<script>
  var x = document.getElementById("login")
  var y = document.getElementById("register")
  var z = document.getElementById("btn")

  function register() {
    x.style.left = "-400px"
    y.style.left = "0px"
    z.style.left = "118px"
  }

  function login() {
    x.style.left = "0px"
    y.style.left = "450px"
    z.style.left = "0px"
  }

</script>
</body>
</html>